<template>
    <div>
        <el-row style="padding-top: 10px">
            <el-col :span="5">
                <div class="elSpanDiv">
                    <el-input v-model="theKeyword" placeholder="支付流水号/订单号"></el-input>
                </div>
            </el-col>
            <el-col :span="2">
                <span class="elSpanDiv">支付时间</span>
            </el-col>
            <el-col :span="8">
                <el-date-picker
                        v-model="selectDate"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-col>
            <el-col :span="1">
                <div class="elSpanDiv">
                    <el-button size="mini" type="primary" round @click="elRowShow = !elRowShow">更多</el-button>
                </div>
            </el-col>
            <el-col :span="2" :offset="4">
                <div class="elSpanDiv">
                    <el-button size="medium" type="primary" @click="selectFun">开始查询</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row style="padding-top: 10px" v-show="elRowShow">
            <el-col :span="2">
                <span class="elSpanDiv">摘要</span>
            </el-col>
            <el-col :span="3">
                <diySelect :optionData="optionAbstractData" @choose="chooseAbstract" :propsValue="selectAbstractValue" size="medium"></diySelect>
            </el-col>
            <el-col :span="2">
                <span class="elSpanDiv">支付方式</span>
            </el-col>
            <el-col :span="3">
                <diySelect :optionData="optionPaymentData" @choose="choosePayment" :propsValue="selectPaymentValue" size="medium"></diySelect>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-table
                        :data="selectTableData"
                        border
                        style="width: 100%"
                        :header-cell-style="this.$store.state.headerCssObj"
                        :cell-style="this.$store.state.cellCssObj">
                    <el-table-column
                            prop="paymentRecordsId"
                            label="支付流水号" width="200">
                    </el-table-column>
                    <el-table-column
                            prop="confirmTime"
                            label="日期" width="200">
                    </el-table-column>
                    <el-table-column
                            prop="paymentAbstract"
                            label="摘要">
                    </el-table-column>
                    <el-table-column
                            prop="payMoney"
                            label="金额">
                    </el-table-column>
                    <el-table-column
                            prop="payStatusId"
                            label="支付方式">
                    </el-table-column>
                    <el-table-column
                            prop="collectStatus"
                            label="状态">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="detailsBtn(scope.row)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div style="text-align: center;width: 100%">
                    <paging :obj = 'pagingData'></paging>
                </div>
            </el-col>
        </el-row>
        <el-dialog
                title="查看详情"
                :visible.sync="detailsVisible"
                width="30%"
                center>
            <div>
                <el-row class="topUpElRow">
                    <el-col :span="12" :offset="6"><span class="elSpanPrompt">{{abstract}}</span></el-col>
                </el-row>
                <el-row class="topUpElRow">
                    <el-col :span="10"><span class="elSpanDiv">充值资金账户：</span></el-col>
                    <el-col :span="14"><span class="elSpanDiv">{{capitalAccount}}</span></el-col>
                </el-row >
                <el-row class="topUpElRow">
                    <el-col :span="8"><span class="elSpanDiv">日期：</span></el-col>
                    <el-col :span="16"><span class="elSpanDiv">{{date}}</span></el-col>
                </el-row>
                <el-row class="topUpElRow">
                    <el-col :span="8"><span class="elSpanDiv">充值金额：</span></el-col>
                    <el-col :span="16"><span class="elSpanDiv">{{amountNumber}}</span></el-col>
                </el-row>
                <el-row class="topUpElRow">
                    <el-col :span="8"><span class="elSpanDiv">备注：</span></el-col>
                    <el-col :span="16"><span class="elSpanDiv">{{accountNote}}</span></el-col>
                </el-row>
                <el-row class="topUpElRow">
                    <el-col :span="8"><span class="elSpanDiv">流水号：</span></el-col>
                    <el-col :span="16"><span class="elSpanDiv">{{payNumber}}</span></el-col>
                </el-row>
                <el-row class="topUpElRow">
                    <el-col :span="8"><span class="elSpanDiv">操作人：</span></el-col>
                    <el-col :span="16"><span class="elSpanDiv">{{operator}}</span></el-col>
                </el-row>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import diySelect from '../../components/public/diySelect'
    import paging from '../../components/public/paging'
    import {mapActions} from 'vuex'
    export default {
        name: "PaymentDetails",
        components:{diySelect,paging},
        data(){
            return{
                //支付流水号/订单号
                theKeyword:'',
                //支付时间
                selectDate:'',
                //elRowShow
                elRowShow:false,
               //摘要下拉列表数据
                optionAbstractData:[
                    {value:'全部摘要', label:'全部摘要'},
                    {value:'现金充值', label:'现金充值'},
                    {value:'销售返点', label:'销售返点'},
                    {value:'退款', label:'退款'},
                    {value:'其他充值', label:'其他充值'},
                    {value:'订单付款', label:'订单付款'},
                    {value:'其他付款', label:'其他付款'},
                    {value:'红冲', label:'红冲'},
                    {value:'订单退款', label:'订单退款'},
                    {value:'收款单充值', label:'收款单充值'},
                    {value:'付款单扣款', label:'付款单扣款'},
                    {value:'退货单退款', label:'退货单退款'},
                    {value:'转账转出', label:'转账转出'},
                    {value:'转账转入', label:'转账转入'},
                    {value:'账单批量付款', label:'账单批量付款'},
                    {value:'拉新提成', label:'拉新提成'},
                    {value:'佣金提现', label:'佣金提现'},
                ],
                //摘要下拉列表选中值
                selectAbstractValue:'',
                //支付方式下拉列表数据
                optionPaymentData:[
                    {value:'全部', label:'全部'},
                    {value:'**公馆支行**8420', label:'**公馆支行**8420'},
                    {value:'现金账户', label:'现金账户'},
                    {value:'预付款账户', label:'预付款账户'},
                    {value:'返点账户', label:'返点账户'},
                ],
                //支付方式下拉列表选中值
                selectPaymentValue:'',
                //表格数据
                selectTableData:[
                    //{payNumber:'44201015700052508420',date:'2020-05-02',amountNumber:10.8,abstract:'',paymentMethod:'',paymentState:'待审核'},
                ],
                //详情弹出框
                detailsVisible:false,
                //摘要
                abstract:'',
                //充值资金账户
                capitalAccount:'',
                //充值日期
                date:'',
                //充值金额
                amountNumber:10.8,
                //备注
                accountNote:'',
                //流水号
                payNumber:'44201015700052508420',
                //操作人
                operator:'周先生',
                //当前页
                currentPage:0,
                //总页数
                pageCount:0,
            }
        },
        computed:{
            pagingData(){
                var that = this;
                let data = {
                    pageSize:5,//一页展示几条数据
                    pagerCount:5,//超过多少页打点省略
                    currentChange(num){
                        that.currentPage = num//改变当前页
                    },
                    pageCount:that.pageCount,//一共多少页
                }
                return data
            }
        },
        methods:{
            ...mapActions(['paymentDetailsPageSelect']),
            chooseAbstract(val){
                this.selectAbstractValue=val;
            },
            choosePayment(val){
                this.selectPaymentValue=val;
            },
            //查看详情
            detailsBtn(row){
                this.detailsVisible = true
                this.abstract = row.accountType
                this.capitalAccount = row.payStatusId
                this.accountNote = row.paymentAbstract
                this.date = row.confirmTime
                this.amountNumber = row.payMoney
                this.payNumber = row.paymentRecordsId
                this.operator = row.operator
            },
            //查询
            selectFun(){
                let obj = {
                    keyword:this.theKeyword,//关键字
                    timeStart:this.selectDate,//开始时间
                    timeEnd:this.selectDate,//结束时间
                    abs:this.selectAbstractValue,//摘要
                    capitalAccount:this.selectPaymentValue,//资金账户
                }
                if(this.theKeyword !== '' ||  this.selectDate !== '' ||this.selectAbstractValue !== '' ||this.selectPaymentValue !== '' ){
                    this.paymentDetailsPageSelect(obj).then(resp=>{
                        if(resp.code === "200"){
                            this.pageCount = resp.pageCount
                            this.selectTableData = resp.data
                        }else {
                            this.$message({
                                type: 'error',
                                message: '查询失败'
                            });
                        }
                    })
                }else {
                    this.$message({
                        type: 'error',
                        message: '请输入查询信息！'
                    });
                }
            },
        }
    }
</script>

<style scoped lang="less">
    .el-button{
        background-color: #099FB8;
    }
    .elSpanDiv{
        text-align: center;
        line-height: 36px;
        height: 36px;
        width: 100%;
        display: inline-block
    }
    .el-table{
        margin: 20px auto;
    }
    .topUpElRow{
        margin-top: 10px;
        .elSpanPrompt{
            display: inline-block;
            text-align: center;
            width: 100%;
            font-size: 22px;
            color: #1596AD;
        }
        span{
            font-size: 18px;
        }
    }
</style>